

/**
 * Created by Administrator on 2019/3/5
 * Function:
 * Desc:
 */
 import React, {Component} from 'react';
 import {StyleSheet,Text} from 'react-native';
 import PropTypes from 'prop-types';

 export default class InputComponent extends Component{
    // 属性检测
    static propTypes = {
        name:PropTypes.string,
        height:PropTypes.number,
        width:PropTypes.number
    };
    // 默认值设置
    static defaultProps = {
        name:'empty',
        height: 100,
        width: 40,
    };
    // 初始化state
    constructor(props){
        super(props);
        this.state = {
            text:'',
            sta:'',
            isShowText:true,
        };
    }
    // 加载前
    componentWillMount(): void {
        console.log('componentWillMount');
    }
    // 加载后
    componentDidMount(): void {
        console.log('componentDidMount');
    }
    // 接收改变参数( props或者state改变 )
    componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
        console.log('componentWillReceiveProps');
    }

     // 是否更新( state改变 )
    shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
        console.log('shouldComponentUpdate');
        return true;
    }
    // 更新前
    componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
        console.log('componentWillUpdate');
    }
    // 更新后
    componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
        console.log('componentDidUpdate');
    }
    // 移除前
    componentWillUnmount(): void {
        console.log('componentWillUnmount');
    }
    render(){
        console.log('render');

        let params={height:100, width:200, color:'green', fontSize:30};
        return (
            <Text>Hello World {this.props.name} {this.props.height}</Text>
        );
    }
 }

 // 构建样式
const styles = StyleSheet.create({
    /*
    * *******    style属性    *******
    * flexDirection        水平：row   竖直：column
    * justifyContent       flex-start、center、flex-end、space-around、space-between以及space-evenly
    * alignItems           flex-start、center、flex-end、stretch。
    * */
});
